<script setup>
import { defineProps } from "vue";
const props = defineProps({
  carInfo: {
    type: Object,
    required: true,
  },
});

function navigateToDetail() {
  uni.navigateTo({
    url: "/pages/Rent/Detail/index",
  });
}
</script>
<template>
  <view>
    <div class="card">
			<div class="left-container">
				<div class="car-image"></div>
				<div class="fee">{{props.carInfo.fee}}</div>
			</div>
      
      <div class="car-info">
        <div class="title">{{props.carInfo.title}}</div>
        <div class="detail">{{props.carInfo.detail}}</div>
        <div class="desc">{{props.carInfo.desc.join(' | ')}}</div>
        <div class="service-op">
          <button class="service-button" @click="navigateToDetail">
            我要租用
          </button>
        </div>
      </div>
    </div>
  </view>
</template>

<style scoped>
.card {
  width: 100%;
  height: 158px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* gap: 20px; */
  padding: 20px;
  margin-bottom: 26px;
  background-color: #f7fff3;
  border-radius: 10px;
  box-sizing: border-box;
}

.car-image {
  width: 100px;
  height: 90px;
  border-radius: 20px;
}

.fee {
  font-size: 16px;
  font-weight: 600;
}

.car-info {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title {
	font-size: 16px;
}
.detail {
	font-size: 12px;
	opacity: 0.5;
	margin-bottom: 18px;
}
.desc {
	font-size: 12px;
}

.service-op {
	display: flex;
	width: 100%;
	justify-content: flex-end;
}

.service-button {
  width: 160px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 10px 0 0 0;
  font-size: 16px;

  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  color: white;
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}
</style>
